<template>
  <el-color-picker
      v-model = "theme"
      class = "theme-picker"
      :predefine = "themeColor"
      popper-class = "theme-picker-dropdown"
  />

</template>

<script lang = "ts">
import { computed, defineComponent, ref, watch } from 'vue'
import { useStore } from '../../store'
import { useGenerateTheme } from '@/hooks/useGenerateTheme'
import { CHANGE_SETTING } from '@/store/modules/methods-type'

export default defineComponent({
  name: 'ThemePicker',
  setup() {
    const store = useStore(),
        themeColor = [ '#409EFF', '#1890ff', '#304156', '#212121', '#11a983', '#13c2c2', '#6959CD', '#f5222d' ],
        defaultTheme = computed(() => store.state.settings.theme),
        theme = ref(''),
        { generateTheme } = useGenerateTheme()

    /* 监听默认样式 */
    watch(() => defaultTheme, val => {
      theme.value = val.value
    }, { immediate: true })

    /* 根据theme选择变化 重新生成主题 */
    watch(theme, (value) => {
      store.dispatch(`settings/${ CHANGE_SETTING }`, { key: 'theme', value })
      generateTheme(value)
    })

    return {
      themeColor,
      theme
    }
  }
})
</script>

<style lang = "scss">
.theme-picker {
  height: 26px !important;
  margin-right: 8px;

  .el-color-picker__trigger {
    height: 26px !important;
    width: 26px !important;
    padding: 2px;
  }
}

.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}

</style>
